<template>
  <div
    v-if="
      selectNode &&
      (selectNode.type === 2 ||
        selectNode.type === 1 ||
        selectNode.type === 7 ||
        selectNode.type === 8 ||
        selectNode.type === 4 ||
        selectNode.type === 9)
    "
    :class="{
      'operator-parameter-container': true,
      fold: !isShowOperatorParameter,
    }"
  >
    <div class="section-header">
      <span v-if="selectNode.type !== 4" @click="toggleDisplayMode"
        >参数配置</span
      >
      <span
        v-else-if="selectNode.type === 4 || selectNode.type === 9"
        @click="toggleDisplayMode"
        >编辑算子</span
      >
      <a-icon-font
        class="icon"
        type="iconicon-beifen-right"
        @click="toggleDisplayMode"
      />
    </div>
    <div v-show="isShowOperatorParameter" class="content">
      <div v-show="isLock || isVisitor" class="lock"></div>
      <component
        :is="componentNameOfConfigure"
        @cancel="toggleDisplayMode"
        @confirm="confirmSetParams"
      ></component>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import SetParameters from '@/components/studio/data/set-params/SetParameters.vue'
import EtlRanksFilter from '@/components/studio/data/set-params/EtlRanksFilter.vue'
import EtlSample from '@/components/studio/data/set-params/EtlSample.vue'
// import EtlJoin from '@/components/studio/data/set-params/EtlJoin.vue'
import AutoJoin from '@/components/studio/data/set-params/AutoJoin.vue'
// import EtlUnion from '@/components/studio/data/set-params/EtlUnion.vue'
import AutoUnion from '@/components/studio/data/set-params/AutoUnion.vue'
import EtlSql from '@/components/studio/data/set-params/EtlSql.vue'
import EtlPivotTable from '@/components/studio/data/set-params/EtlPivotTable.vue'
import Mymodel from '@/components/studio/data/set-params/MyModel.vue'
import OperatorNode from '@/components/studio/data/set-params/OperatorNode.vue'
import SetParametersPro from '@/components/studio/data/set-params/SetParametersPro.vue'
import CustomOperatorForm from '@/components/studio/data/set-params/CustomOperatorForm.vue'
import { simpleUpdate } from '@/api/task'
// updateNodeToPipeline

@Component({
  components: {
    'set-parameters': SetParameters,
    'etl-ranks-filter': EtlRanksFilter,
    'etl-sample': EtlSample,
    'etl-join': AutoJoin,
    'etl-union': AutoUnion,
    'etl-sql': EtlSql,
    'etl-pivot-table': EtlPivotTable,
    'my-model': Mymodel,
    'operator-node': OperatorNode,
    'set-parameters-pro': SetParametersPro,
    'custom-operator-form': CustomOperatorForm,
  },
})
export default class OperatorParameter extends Vue {
  private isShowOperatorParameter: boolean = true

  private ETLAlgType: any = {
    1: 'etl-ranks-filter',
    2: 'etl-join',
    3: 'etl-sample',
    4: 'etl-union',
    5: 'etl-remap',
    6: 'etl-sql',
    7: 'my-model',
  }

  public get isLock() {
    return DataViewStore.getLock
  }

  public get isVisitor() {
    return DataViewStore.isVisitor
  }

  // 当前节点
  private get selectNode() {
    return DataViewStore.selectNode
  }

  private get componentNameOfConfigure() {
    let componentName: string = 'set-parameters'
    if (this.selectNode.type === 2 || this.selectNode.type === 7) {
      if (+this.selectNode.type === 2 && +this.selectNode.data.algType === 7) {
        componentName = 'etl-pivot-table'
      } else {
        componentName = this.ETLAlgType[this.selectNode.data.algType]
      }
    } else if (this.selectNode.type === 4) {
      componentName = 'operator-node'
    } else if (this.selectNode.type === 8) {
      componentName = 'set-parameters-pro'
    } else if (this.selectNode.type === 9) {
      componentName = 'custom-operator-form'
    }
    return componentName
  }

  /**
   * 抽屉折叠
   */
  toggleDisplayMode() {
    this.isShowOperatorParameter = !this.isShowOperatorParameter
    DataViewStore.setIsShowOperatorParameter(this.isShowOperatorParameter)
  }

  /**
   * 确认编辑参数
   */
  public confirmSetParams(setParameters: any) {
    // console.log(setParameters)
    const dataJson: any = {}
    Object.keys(setParameters).forEach((key: string) => {
      dataJson[key] = setParameters[key]
      dataJson.algType = this.selectNode.data.algType
    })
    const parameters = {
      id: this.selectNode.id,
      name: this.selectNode.name,
      projectId: this.selectNode.projectId,
      pipelineId: this.selectNode.pipelineId,
      parentId: this.selectNode.parentId,
      childId: this.selectNode.childId,
      type: this.selectNode.type,
      data:
        this.selectNode.type === 7 || this.selectNode.type === 8
          ? setParameters
          : dataJson,
    }
    this.nodeUpdate(parameters)
  }

  /**
   * 节点参数更新， (重)
   * @param parameters
   */
  public async nodeUpdate(parameters: any) {
    simpleUpdate({ data: parameters })?.then((response: any) => {
      if (response?.data?.code === 100) {
        this.$message.success(`${this.selectNode.name}节点参数编辑成功 !`, 1)
        DataViewStore.setConfirmEditTime(new Date().getTime())
        // 更新pipeline
        DataViewStore.queryPipelineNodes({
          id: this.selectNode.projectId,
          pipelineId: this.selectNode.pipelineId,
        })
      } else {
        this.$message.error(response.data.message)
      }
    })
  }
}
</script>

<style lang="less" scoped>
.operator-parameter-container {
  background-color: #fff;
  width: 420px;

  .section-header {
    align-items: center;
    background-color: #eff0f7;
    border-bottom: 1px solid rgba(233, 233, 233, 0.8);
    color: #373b52;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: space-between;
    line-height: 37px;
    padding: 0 10px 0 15px;
    user-select: none;
    width: 100%;

    span {
      cursor: pointer;
      font-family: 'Microsoft YaHei', '微软雅黑', 'Arial Narrow', Arial,
        sans-serif;
      padding: 0 5px;
    }

    .icon {
      cursor: pointer;
      padding: 8px;
      transform: rotate(180deg);
    }
  }

  .content {
    background-color: #fafafc;
    height: calc(100% - 38px);

    .lock {
      background-color: #000;
      cursor: not-allowed;
      height: calc(100% - 38px);
      opacity: 0.1;
      position: absolute;
      width: 413px;
      z-index: 999;
    }
  }

  &.fold {
    background-color: #eff0f7;
    width: 44px;

    .section-header {
      border-bottom: 0;
      height: auto;
      letter-spacing: 8px;
      padding: 10px 0;
      writing-mode: vertical-lr;
    }

    .icon {
      right: 11px;
      transform: rotate(0);
    }
  }
}
</style>
